<%@page import="itpenguin.review.entities.Item"%>
<%@page import="java.net.URLEncoder"%>
<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<fmt:setLocale value="ja-JP" />
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<article itemscope itemtype="http://data-vocabulary.org/Review">
	<header>
		<h1 itemprop="itemreviewed" class="${item.productGroup}"><span class="icon"></span><a href="/review/${item.itemId}">${item.reviewTitle}</a></h1>
		<p class="published">
			<fmt:formatDate var="utcDt" value="${item.reviewDate}" pattern="yyyy-MM-dd'T'HH:mm:ss" timeZone="UTC"/>
			<time pubdate="pubdate" datetime="${utcDt}"  itemprop="dtreviewed">
				<fmt:formatDate value="${item.reviewDate}" pattern="yyyy/MM/dd" timeZone="JST" />
			</time>
			<span itemprop="reviewer">ヒロ†</span>
		</p>
		<div class="share">
			<div class="g-po-outer"><div class="g-plusone" data-size="small"></div></div>
			<div class="fb-like" data-send="false" data-layout="button_count" data-width="100" data-show-faces="true" ></div>
			<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
			<a style="margin-right:15px;position: relative; top: -1px;" href="#" onclick="Evernote.doClip({contentId:'main_section'}); return false;"><img src="http://static.evernote.com/article-clipper.png" alt="Clip to Evernote" /></a>
			<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
		</div>
	</header>
	
	<div style="margin:2em 0 3em;">
	<div class="itemImg">
		<c:if test="${! empty item.mediumImageUrl}"><img src="${item.mediumImageUrl}"/></c:if>
	</div>
	<div class="item">
		<ul class="itemInfo">
		<c:if test="${item.productGroup == 'Book'}">
			<li><span>著者:</span>
				<c:forEach var="author" items="${item.authors}">${author} </c:forEach>
			</li>
			<li><span>出版社:</span>${item.publisher}</li>
			<li><span>ページ数:</span>${item.numberOfPages}</li>
		</c:if>
		<c:if test="${item.productGroup == 'Visual'}">
			<li><span>監督:</span>
				<c:forEach var="director" items="${item.directors}">${director} </c:forEach>
			</li>
			<li><span>出演:</span>
				<c:forEach var="actor" items="${item.actors}">${actor} </c:forEach>
			</li>
			<li><span>形式:</span>
				<c:forEach var="format" items="${item.formats}">${format} </c:forEach>
			</li>
			<li><span>画面サイズ:</span>${item.aspectRatio}</li>
			<li><span>時間:</span>${item.runningTime} 分</li>
			<li><span>販売元:</span>${item.publisher}</li>
		</c:if>
		<c:if test="${item.productGroup == 'Music'}">
			<li><span>アーティスト:</span>
				<c:forEach var="artist" items="${item.artists}">${artist} </c:forEach>
			</li>
			<li><span>レーベル:</span>${item.label}</li>
			<li><span>時間:</span>${item.runningTime} 分</li>
			<li><span>収録曲:</span>
				<c:forEach var="track" items="${item.tracks}">${track} </c:forEach>
			</li>
		</c:if>
		<c:if test="${item.productGroup == 'Game'}">
			<li><span>プラットフォーム:</span>${item.platform}</li>
			<li><span>販売元:</span>${item.publisher}</li>
		</c:if>
		<li><span>発売日:</span><fmt:formatDate value="${item.releaseDate}" pattern="yyyy/MM/dd"/></li>
		</ul>
	
		<div class="score">
			<span itemprop="rating">${item.score}点</span>&nbsp;<span class="star"><span class="star${item.numberOfStars}"></span></span>
		</div>
		<meta itemprop="best" content="100" />
		<div style="margin-left:2em;">
			<a href="${item.detailPageUrl}">
				<img src="/img/amazon.gif"/>
			</a>
		</div>
	</div>
	</div>
	<c:if test="${isMobile }">
	<div style="width:320px; height:50px; margin:-1em auto 2em;">
		<script type="text/javascript"><!--
		google_ad_client = "ca-pub-2855357403949640";
		/* for Mobile */
		google_ad_slot = "7833433879";
		google_ad_width = 320;
		google_ad_height = 50;
		//-->
		</script>
		<script type="text/javascript"
		src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
		</script>
	</div>
	</c:if>
	<div class="body" id="main_section">
	<c:if test="${! isMobile }">
		<div style="float:right; width:336px; height:280px; padding:0 0 1em 2em;">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 336x280, IT Penguin -->
			<ins class="adsbygoogle"
			     style="display:inline-block;width:336px;height:280px"
			     data-ad-client="ca-pub-2855357403949640"
			     data-ad-slot="5428407488"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
	</c:if>
		<section itemprop="description">${item.review}</section>
	</div>
	<div class="varientImages">
		<c:forEach var="imgUrl" items="${item.varientImagesUrl}">
			<img src="${imgUrl}"/>
		</c:forEach>
	</div>
</article>
<c:if test="${! isMobile }">
<div class="relatedAsin">
<c:if test="${fn:length(item.relatedAsins) != 0}">
	<c:forEach varStatus="status" items="${item.relatedAsins}" var="relatedAsin">
		<iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=FFFFFF&IS2=1&nou=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=hiroatsu-22&o=9&p=8&l=as1&m=amazon&f=ifr&ref=tf_til&asins=${relatedAsin}" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
	</c:forEach>
</c:if>
<c:if test="${fn:length(item.relatedAsins) == 0 and false}">
	<c:set var="store">
		<c:if test="${item.productGroup == 'Book'}">books-jp</c:if>
		<c:if test="${item.productGroup == 'Music'}">music-jp</c:if>
		<c:if test="${item.productGroup == 'Visual'}">dvd-jp</c:if>
		<c:if test="${item.productGroup == 'Game'}">videogames-jp</c:if>
	</c:set>
	<iframe src="http://rcm-jp.amazon.co.jp/e/cm?t=hiroatsu-22&o=9&p=16&l=st1&mode=${store}&search=<%= URLEncoder.encode(((Item)request.getAttribute("item")).getReviewTitle(), "UTF-8") %>&fc1=000000<1=_blank&lc1=3366FF&bg1=FFFFFF&f=ifr" 
		marginwidth="0" marginheight="0" width="468" height="336" border="0" frameborder="0" style="border:none;" scrolling="no"></iframe>
</c:if>
</div>
</c:if>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
